<!-- 注册弹窗 -->
<template>
  <div class="registered-dialog">
    <el-dialog class="ypt-dialog" title="注册" :visible.sync="myVisible" width="500px">
      <el-form :model="newUser" label-width="90px" size="medium">
        <el-form-item label="用户名">
          <el-input v-model="newUser.username"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="newUser.phone"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input class="verify-code-input" v-model="newUser.verificationCode" auto-complete="off"></el-input>
          <el-button type="success" @click="getSmsCode()">获取验证码</el-button>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="newUser.newPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="newUser.makeSureNewPassword" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sure()">确 定</el-button>
        <el-button @click="close()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import {
//   ElDialog,
//   ElForm,
//   ElFormItem,
//   ElButton,
//   ElInput
// } from '@eui'
import {
  sendVerificationCode,
  findPassword
} from '../api/loginApi'
export default {
  // components: {
  //   ElDialog,
  //   ElForm,
  //   ElFormItem,
  //   ElButton,
  //   ElInput
  // },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      newUser: {
        username: '',
        phone: '',
        verificationCode: '',
        newPassword: '',
        makeSureNewPassword: ''
      },
      myVisible: this.visible
    }
  },
  watch: {
    visible (value) {
      this.myVisible = value
    },
    myVisible (value) {
      this.$emit('visibleChange', value)
    }
  },
  methods: {
    // 获取验证码
    async getSmsCode () {
      const res = await sendVerificationCode({
        username: this.newUser.username,
        phone: this.newUser.phone
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
      }
    },
    async sure () {
      if (this.newUser.username === '') {
        this.$notify.error({
          title: '提示',
          message: '请输入用户名！'
        })
        return false
      }
      if (this.newUser.phone === '') {
        this.$notify.error({
          title: '提示',
          message: '请输入电话号码！'
        })
        return false
      }
      if (this.newUser.verificationCode === '') {
        this.$notify.error({
          title: '提示',
          message: '请输入验证码！'
        })
        return false
      }
      if (this.newUser.newPassword === '') {
        this.$notify.error({
          title: '提示',
          message: '请输入新密码！'
        })
        return false
      }
      if (this.newUser.makeSureNewPassword === '') {
        this.$notify.error({
          title: '提示',
          message: '请输入确认密码！'
        })
        return false
      }
      if (this.newUser.newPassword !== this.newUser.makeSureNewPassword) {
        this.$notify.error({
          title: '提示',
          message: '两次密码不一致！'
        })
        return false
      }
      const res = await findPassword(this.newUser)
      console.log(res)
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.myVisible = false
      } else {
        this.$notify({
          title: '提示',
          message: res.msg,
          type: 'warning'
        })
      }
    },
    close () {
      this.myVisible = false
      this.newUser.username = ''
      this.newUser.phone = ''
      this.newUser.verificationCode = ''
      this.newUser.newPassword = ''
      this.newUser.makeSureNewPassword = ''
    }
  }
}
</script>
